<template>
  <div style="height: 100%; background-color: #fff">
    <van-nav-bar title="宠物社区" left-arrow @click-left="onClickLeft" />
    <div v-if="detailsData" class="head-box">
      <h3>{{ detailsData.title }}</h3>
      <div class="content-top">
        <div class="avatar">
          <img :src="detailsData.user_avatar" alt />
        </div>
        <div class="username">
          <p>{{ detailsData.user_name }}</p>
          <p>发布于{{ detailsData.createtime }}</p>
        </div>
      </div>
      <div
        class="content"
        v-html="detailsData.details_content"
        style="font-size: 0.8rem"
      ></div>
    </div>
    <div :style="{ backgroundColor: '#efefef', height: '0.4rem' }"></div>
    <div class="comment">
      <h3>全部回复</h3>
      <ul v-if="commentData">
        <li v-for="item in commentData" :key="item.id">
          <div class="post-head">
            <div class="avatar">
              <img :src="item.user_avatar" alt />
            </div>
            <div class="username">
              <p>{{ item.user_name }}</p>
              <p>回复于{{ item.createtime }}</p>
            </div>
          </div>
          <div
            v-html="item.content"
            style="padding: 0 1.5rem 0 3rem; font-size: 0.8rem"
          ></div>
        </li>
      </ul>
    </div>
    <div class="pagination">
      <van-pagination
        v-if="commentData?.length !== 0"
        v-model="currentPage"
        :total-items="total"
        :items-per-page="pageSize"
        @change="handleChangePagination"
      />
    </div>
    <div
      style="
        margin-bottom: 4rem;
        background-color: #fff;
        padding: 0.8rem 1rem 7rem 1rem;
      "
    >
      <h3>发表评论</h3>
      <van-field
        style="border: 0.1rem solid #ccc; margin-bottom: 1rem"
        v-model="commentValue"
        clearable
        size="large"
        placeholder="请输入您的评论..."
      />
      <van-button
        style="float: right"
        type="primary"
        size="small"
        @click="handlePublishComment(detailsData.posts_id)"
        >发表</van-button
      >
    </div>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import moment from "moment";
import { getForum, getForumComment, publishComment } from "@/api/forum";
import { useStore } from "vuex";
import { Toast } from "vant";
export default {
  name: "ForumDetails",
  setup() {
    // 点击左箭头返回前一页
    const onClickLeft = () => history.back();
    // 使用路由
    const route = useRoute();

    // 详情数据
    const detailsData = ref();

    // 获取论坛详情数据
    const getForumData = () => {
      const query = {
        posts_id: route.params.id,
      };
      getForum(query)
        .then((res) => {
          res.data.createtime = moment(res.data.createtime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          detailsData.value = res.data;
        })
        .catch((error) => {
          throw new Error(error);
        });
    };

    // 评论数据
    const commentData = ref();

    // 当前页
    const currentPage = ref(1);

    // 总条数
    const total = ref();

    // 页面条数
    const pageSize = ref(10);

    // 获取评论
    const getCommentData = () => {
      const query = {
        posts_id: route.params.id,
        current: currentPage.value,
        pageSize: pageSize.value,
      };
      getForumComment(query)
        .then((res) => {
          res.data.forEach((item) => {
            item.createtime = moment(item.createtime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          commentData.value = res.data;
          total.value = res.total;
        })
        .catch((error) => {
          throw new Error(error);
        });
    };

    onMounted(() => {
      getForumData();
      getCommentData();
    });

    // 切换页码
    const handleChangePagination = (current) => {
      currentPage.value = current;
      getCommentData();
    };

    // 评论框数据绑定
    const commentValue = ref("");

    // 使用vuex
    const store = useStore();

    // 点击发表评论
    const handlePublishComment = (posts_id) => {
      const { user_id, user_name, user_avatar } = store.state.user.profile;
      const params = {
        posts_id,
        user_id,
        user_name,
        user_avatar,
        content: commentValue.value,
        createtime: moment().format("YYYY-MM-DD HH:mm:ss"),
      };
      publishComment(params)
        .then((res) => {
          if (res.status === 200) {
            Toast("发表成功");
            commentValue.value = "";
            if (total.value) {
              // 总数模每页数量能模尽就让页码+1
              if (total.value % pageSize.value === 0) {
                currentPage.value = Math.ceil(total.value / pageSize.value) + 1;
              } else {
                currentPage.value = Math.ceil(total.value / pageSize.value);
              }
            }
            getCommentData();
          }
        })
        .catch((error) => {
          throw new Error(error);
        });
    };

    return {
      onClickLeft,
      detailsData,
      commentData,
      currentPage,
      total,
      pageSize,
      handleChangePagination,
      commentValue,
      handlePublishComment,
    };
  },
};
</script>
<style scoped lang="less">
.head-box {
  padding: 0 1rem;
  background-color: #fff;
  h3 {
    margin: 0;
    padding: 1.5rem 0;
  }
  .content-top {
    height: 2.5rem;
    .avatar {
      float: left;
      width: 2.5rem;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .username {
      float: left;
      height: 100%;
      width: calc(100% - 2.5rem);
      p {
        margin: 0.2rem 0 0 0.5rem;
      }
      p:first-child {
        font-size: 0.8rem;
      }
      p:last-child {
        font-size: 0.7rem;
        color: #ccc;
      }
    }
  }
  .content {
    padding: 1.8rem 0.5rem;
  }
}
.comment {
  padding: 1rem 1rem;
  background-color: #fff;
  h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
  }
}
.post-head {
  height: 2.5rem;
  padding: 1rem 0.5rem 0.6rem 0.5rem;
  .avatar {
    float: left;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .username {
    float: left;
    height: 100%;
    width: calc(100% - 2.5rem);
    p {
      margin: 0.2rem 0 0 0.5rem;
    }
    p:first-child {
      font-size: 0.8rem;
    }
    p:last-child {
      font-size: 0.6rem;
      color: #ccc;
    }
  }
}

.pagination {
  margin: 1rem 0 1rem 0;
}
</style>
